import React from 'react'
import { Tree, Icon } from 'rsuite'

import './index.less'

const Folder = node => pug`
  .box.box-item.tree-node
    Icon(icon="folder-o")
    | #{node.label}
`

const File = node => pug`
  .box.box-item.tree-node
    Icon(icon="file-code-o")
    | #{node.label}
`

const TreeNode = node => {
  if (!node) return null
  if (node.cate === 'dir') return Folder(node)
  if (node.cate === 'file') return File(node)
  return null
}

function TreeComponent({ data, onSelect }) {
  return pug`
    Tree.tree(
      data=data
      defaultExpandAll
      renderTreeNode=TreeNode
      onSelect=onSelect
    )
  `
}

export default TreeComponent
